<script setup lang="ts">
  import AppLoginLogo from '@/components/common/app/AppLoginLogo.vue';
  import { useLocale } from '@/locales/useLocale';
  import SmsLoginForm from '@/components/form/SmsLoginForm.vue';
  import { ref } from 'vue';
  import UserLoginForm from '@/components/form/UserLoginForm.vue';
  import ForgotPasswordForm from '@/components/form/ForgotPasswordForm.vue';
  const { t } = useLocale();
  enum LoginOptions {
    MOBILE = 'message.sys.login.mobileSignInFormTitle',
    USER = 'message.sys.login.signInFormTitle',
    FORGOT = 'message.sys.login.forgetFormTitle',
  }
  const loginTitle = ref('message.sys.login.mobileSignInFormTitle');
</script>

<template>
  <div
    class="login-container md:px-48 lg:px-72 xl:px-0 overflow-y-auto bg-none hidden-scrollbar xl:bg-[url('/src/assets/images/back1.png')] xl:dark:bg-[url('/src/assets/images/back.png')] bg-header-bg-dark bg-cover bg-center"
  >
    <AppLoginLogo class="-enter-y" />
    <div class="container mx-auto">
      <div
        class="grid grid-cols-1 xl:grid-cols-2 px-6 pb-6 xl:gap-0"
        style="height: calc(100vh - 140px - 60px)"
      >
        <div class="hidden xl:flex justify-center -enter-x flex-col h-full dark:text-menu-text">
          <div>
            <img
              src="../assets/images/doctor1.png"
              alt=""
              class="-enter-x lg:w-[70%] xl:w-[55%] 2xl:w-[60%] mx-auto"
            />
          </div>
          <div class="text-2xl mt-10 -enter-x text-center">
            {{ t('message.sys.login.signInTitle') }}
          </div>
          <div class="text-sm mt-6 -enter-x text-center">
            {{ t('message.sys.login.signInDesc') }}
          </div>
        </div>
        <div
          class="flex-justify-items-center enter-x bg-none rounded-lg bg-header-bg dark:bg-header-bg-dark xl:bg-transparent xl:dark:bg-transparent xl:bg-cover xl:bg-center"
        >
          <div class="px-6 py-6 xl:py-0 lg:px-10 xl:px-24 2xl:px-32 w-full xl:pb-12">
            <h1 class="text-2xl xl:text-3xl mb-5 font-bold enter-x">
              {{ t(loginTitle) }}
            </h1>
            <SmsLoginForm v-if="loginTitle === 'message.sys.login.mobileSignInFormTitle'" />
            <UserLoginForm v-if="loginTitle === 'message.sys.login.signInFormTitle'" />
            <ForgotPasswordForm v-if="loginTitle === 'message.sys.login.forgetFormTitle'" />
            <div class="py-6 flex justify-around flex-col xl:flex-row enter-x">
              <div
                class="hover:border-blue-300 hover:text-blue-300 cursor-pointer flex-1 border border-btn-border dark:border-border-b-dark dark:hover:border-blue-500 py-1 lg:py-1.5 text-center rounded xl:mr-2"
                :class="{
                  'bg-gray-200 dark:bg-gray-400':
                    loginTitle === 'message.sys.login.mobileSignInFormTitle',
                }"
                @click="loginTitle = 'message.sys.login.mobileSignInFormTitle'"
              >
                {{ t('message.sys.login.mobileSignInFormTitle') }}
              </div>
              <div
                class="hover:border-blue-300 hover:text-blue-300 cursor-pointer flex-1 border border-btn-border dark:border-border-b-dark dark:hover:border-blue-500 py-1 lg:py-1.5 text-center rounded my-2 xl:my-0 xl:mx-1"
                :class="{
                  'bg-gray-200 dark:bg-gray-400':
                    loginTitle === 'message.sys.login.signInFormTitle',
                }"
                @click="loginTitle = 'message.sys.login.signInFormTitle'"
              >
                {{ t('message.sys.login.signInFormTitle') }}
              </div>
              <div
                class="hover:border-blue-300 hover:text-blue-300 cursor-pointer flex-1 border border-btn-border dark:border-border-b-dark dark:hover:border-blue-500 py-1 lg:py-1.5 text-center rounded xl:ml-2"
                :class="{
                  'bg-gray-200 dark:bg-gray-400':
                    loginTitle === 'message.sys.login.forgetFormTitle',
                }"
                @click="loginTitle = 'message.sys.login.forgetFormTitle'"
              >
                {{ t('message.sys.login.forgetFormTitle') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  .login-container {
    min-height: calc(100vh - 60px);
    @media (max-width: 1280px) {
      height: calc(100vh - 60px);
    }
  }
</style>
